<template>
    <div class="post-management">
        <h2>论坛帖子</h2>
      <div class="search-box">
        <input v-model="searchQuery" @input="searchPosts" placeholder="搜索用户名..."/>
      </div>
      <table>
        <thead>
          <tr>
            <th>用户名</th>
            <th>发布时间</th>
            <th>点赞数量</th>
            <th>收藏数量</th>
            <th>转发数量</th>
            <th>是否可能违规</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
            <tr v-for="post in filteredPosts" :key="post.id" :class="{ 'violation': post.possibleViolation }" class="table-row">
                <td>{{ post.username }}</td>
                <td>{{ post.publishDate }}</td>
                <td>{{ post.likes }}</td>
                <td>{{ post.favorites }}</td>
                <td>{{ post.shares }}</td>
                <td>{{ post.possibleViolation ? "是" : "否" }}</td>
                <td>
                    <button @click="viewDetails(post.id)">详情</button>
                    <button @click="deletePost(post.id)">删除</button>
                </td>
            </tr>
        </tbody>
      </table>
      <div v-if="showDetail" class="post-detail-modal">
        <div class="modal-content">
          <span class="close" @click="closeDetail">&times;</span>
          <h3>帖子内容</h3>
          <p>{{ postDetail.content }}</p>
          <h4>图片</h4>
          <div class="images">
            <img v-for="(image, index) in postDetail.images" :key="index" :src="image" :alt="'图片' + (index + 1)" @click="viewImage(image)" class="thumbnail"/>
          </div>
        </div>
      </div>
      <div v-if="deletedCommunityMessage" class="message">{{ deletedCommunityMessage }}</div>
      <div v-if="filteredPosts.length === 0">
        <p>目前没有符合条件的帖子信息。</p>
      </div>
    </div>
</template>
  
<script>
  import { findAllCommunity,deleteCommunity } from "../../api/admins";
  export default {
    data() {
      return {
        posts: [],
        searchQuery: "",
        filteredPosts: [],
        showDetail: false,
        postDetail: {},
        sensitiveWords: ["不当言论", "恶意", "敏感"], 
        deletedCommunityMessage: ''
      };
    },
    methods: {
      async fetchPostsz() {
        const response = await findAllCommunity();
        this.posts = response.data;
        this.posts.forEach(post => {
          post.possibleViolation = this.sensitiveWords.some(word =>
            post.content.includes(word)
          );
        });
        this.filteredPosts = this.posts;
      },
      viewImage(image) {
        const fullImage = window.open();
        fullImage.document.write('<img src="' + image + '" style="width: 100%; height: auto;">');
      },
      fetchPosts() {
        this.posts = [

        ];
        this.posts.forEach(post => {
          post.possibleViolation = this.sensitiveWords.some(word =>
            post.content.includes(word)
          );
        });
        this.filteredPosts = this.posts;
      },
      searchPosts() {
        if (this.searchQuery) {
          this.filteredPosts = this.posts.filter(post =>
            post.username.includes(this.searchQuery) || post.content.includes(this.searchQuery)
          );
        } else {
          this.filteredPosts = this.posts;
        }
        this.currentPage = 1;
      },
      changePage(page) {
            if (page >= 1 && page <= this.totalPages) {
                this.currentPage = page;
            }
      },
      viewDetails(postId) {
        const post = this.posts.find(post => post.id === postId);
        this.postDetail = post;
        this.showDetail = true;
      },
      closeDetail() {
        this.showDetail = false;
      },
      deletePost(postId) {
        if (confirm("确定删除该帖子？")) {
          this.posts = this.posts.filter(post => post.id !== postId);
          //删除

          this.searchPosts();
          deleteCommunity(postId)
          this.deletedCommunityMessage = `帖子已删除！`;
            // 2秒后清除提示信息
            setTimeout(() => {
              this.deletedCommunityMessage = '';
            }, 2000);
        }
      },
    },
    mounted() {

      this.fetchPostsz();
    },
    
  };
</script>
  
<style scoped>
.post-management {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
}
h2 {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.search-box {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.search-box input {
  padding: 10px;
  width: 300px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}
.search-box input:focus {
  border-color: #5b9bd5;
  outline: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
th {
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: bold;
    position: relative;
}
th span {
    position: absolute;
    right: 10px;
    font-size: 14px;
}
tr:hover {
    background-color: #fafafa;
}
.violation {
    background-color: #f8d7da; 
    color: red;
}
.violation:hover{
    background-color: #e4c4c7;
}

button {
    padding: 6px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
}
button:hover {
    background-color: #45a049;
}
button:disabled {
    background-color: #dcdcdc;
    cursor: not-allowed;
}
button:last-child {
    margin-right: 0; 
}

.post-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
  background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    min-width: 500px;
    max-width: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}
.close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #333;
}
.images img {
    width: 250px; 
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer; 
    transition: transform 0.3s ease;
}
.thumbnail {
    width: 100px;
    height: auto;
    cursor: pointer;
    margin: 5px;
}
.thumbnail:hover {
    opacity: 0.7;
}
.post-detail-modal img {
    max-width: 80%;
    max-height: 80%;
}
.pagination{
    margin-top: 10px;
}

.message {
  color: green;
  font-size: 1rem;
  text-align: center;
  margin-top: 20px;
}
</style>